<template>
  <a-form :form="form" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
    <a-form-item :wrapper-col="{ span: 22, offset: 2}" style="text-align: right">
      <a-button   type="primary"  @click="handleOk">更新属性配置</a-button>
    </a-form-item>
    <a-form-item label="应用视图">
        <a-row>
          <a-col :span="8">
            <a-checkbox  v-decorator="['uiAppview', { }]" :checked="checkAppView" @change="onChangecheckAppView">搜索</a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox  v-decorator="['uiApplist', { }]" :checked="checkApplist" @change="onChangecheckApplist">列表</a-checkbox>
          </a-col>
          <a-col :span="8">
            <a-checkbox  v-decorator="['uiForm', { }]" :checked="checkForm" @change="onChangecheckForm">表单</a-checkbox>
          </a-col>
        </a-row>
    </a-form-item>
    <a-form-item label="数据字段">
      <a-input v-decorator="['uiFieldname', {  }]" disabled/>
    </a-form-item>
    <a-form-item label="数据类型">
      <a-input v-decorator="['uiFieldtype', {  }]" disabled/>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 24, offset: 2 }">
      <a-checkbox v-decorator="['uiNotnull', {  }]" :checked="checkNotNull" @change="onChangecheckNotNull">必填项</a-checkbox>
      <a-checkbox  v-decorator="['uiOnlyread', {  }]" :checked="checkOnlyRead" @change="onChangecheckOnlyRead">只读</a-checkbox>
    </a-form-item>
    <a-form-item label="中文名称">
      <a-input
        v-decorator="['uiFieldcomment', { rules: [{ required: true, message: 'Please input your note!' }] }]"
      />
    </a-form-item>
    <a-form-item label="默认值">
      <a-input
        v-decorator="['uiDefaultvalue', { }]"
      />
    </a-form-item>
    <div>
      <a-row>
        <a-col :span="6"></a-col>
        <a-col :span="18">
          <p> 函数默认值,如下:
            当前时间：<span style="color: red;"><b>#date</b></span>
          当前登录人：<span style="color: red;"><b>#user</b></span>
          登陆人部门：<span style="color: red;"><b>#orgCode</b></span>
          </p>
        </a-col>
      </a-row>
    </div>
    <a-form-item label="组件类型" >
      <a-select  v-decorator="[ 'uiUitype', {}]" placeholder="请选择">
        <a-select-option value="0">输入框</a-select-option>
        <a-select-option value="1">下拉框</a-select-option>
        <a-select-option value="6">可搜索下拉框</a-select-option>
        <a-select-option value="2">日期框</a-select-option>
        <a-select-option value="7">日期时间框</a-select-option>
        <a-select-option value="4">数字框</a-select-option>
        <a-select-option value="3">自动完成</a-select-option>
        <a-select-option value="5">文本框</a-select-option>
      </a-select>
    </a-form-item>
    <a-form-item label="正则表达式">
      <j-dict-select-tag  title="正则表达式" dictCode="expression" placeholder="请选择" triggerChange v-decorator="['uiExpression',{} ]"/>
    </a-form-item>
    <a-form-item label="表达式值">
          <a-textarea :autoSize="{ minRows: 3, maxRows: 4 }" v-decorator="['uiExpression', { }]" placeholder="正则表达式下拉框的值显示在这，如不满足可以自己在这里修改，或者将表达式放到这里" ></a-textarea>
    </a-form-item>
    <a-form-item label="Select数据">
      <div>
        <a-row>
          <a-col :span="20">
            <a-input v-decorator="['uiSelectfunc', { }]"/>
          </a-col>
          <a-col :span="2">
            <a-button type="link" block icon="search" @click="onSearch"/>

            <select-dict-list ref="selectSearch" @ok="selectCode"></select-dict-list>
          </a-col>
        </a-row>
      </div>
    </a-form-item>
    <div>
      <a-row>
        <a-col :span="6"></a-col>
        <a-col :span="18" style="color: red">
          <p> 参数表配置，如：sys_user,username,id </p>
        </a-col>
      </a-row>

    </div>
  </a-form>


</template>

<script>
  import pick from 'lodash.pick'
  import { httpAction, getAction, putAction } from '@/api/manage'
  import SelectDictList from  './SelectDictList'

  export default {
    components: { SelectDictList },

    data() {
      return {

        //搜索
        checkAppView: false,
        //列表
        checkApplist: false,
        //表单
        checkForm: false,
        //必填
        checkNotNull: false,
        //只读
        checkOnlyRead: false,
        model: {},
        formLayout: 'horizontal',
        form: this.$form.createForm(this),
        url: {
          edit: '/generatecode/viewUiproperties/edit'
        }
      }
    },
    methods: {
      onChangecheckAppView(){
        this.checkAppView=!this.checkAppView
      },
      onChangecheckApplist(){
        this.checkApplist=!this.checkApplist
      },
      onChangecheckForm(){
        this.checkForm=!this.checkForm
      },
      onChangecheckNotNull(){
        this.checkNotNull=!this.checkNotNull
      },
      onChangecheckOnlyRead(){
        this.checkOnlyRead=!this.checkOnlyRead
      },

      close(){
        //搜索
        this.checkAppView= false
          //列表
          this.checkApplist= false
          //表单
          this.checkForm= false
          //必填
          this.checkNotNull= false
          //只读
          this.checkOnlyRead= false
      },

      edit(record) {
        this.close()
        this.form.resetFields()
        this.model = Object.assign({}, record)

        if(this.model.uiAppview=="true"){
          this.checkAppView=true
        }
        if(this.model.uiApplist=="true"){
          this.checkApplist=true
        }
        if(this.model.uiForm=="true"){
          this.checkForm=true
        }
        if(this.model.uiNotnull=="true"){
          this.checkNotNull=true
        }
        if(this.model.uiOnlyread=="true"){
          this.checkOnlyRead=true
        }
        this.visible = true
        this.$nextTick(() => {
          this.form.setFieldsValue(pick(this.model, 'uiFieldname', 'uiFieldcomment', 'uiFieldtype',
            'uiNotnull', 'uiAppview', 'uiApplist', 'uiForm', 'uiOnlyread', 'uiDefaultvalue', 'uiUitype', 'uiExpression','uiSelectfunc'))

        })

      },
      handleOk() {
        const that = this
        // 触发表单验证
        this.form.validateFields((err, values) => {
          if (!err) {
            that.confirmLoading = true
            let httpurl = ''
            let method = ''
            httpurl += this.url.edit
            method = 'put'
            let formData = Object.assign(this.model, values)

            if(formData.uiApplist=='false'&&formData.uiForm=='false'){
              that.$message.warning("应用视图的列表和表单两者必选一个")
              return
            }
            console.log(formData)
            httpAction(httpurl, formData, method).then((res) => {
              if (res.success) {
                that.$message.success(res.message)
              } else {
                that.$message.warning(res.message)
              }
            })
          }
        })
      },

      handleSubmit(e) {
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values)
          }
        })
      },
      //字典项配置选择
      onSearch() {
        this.$refs.selectSearch.show()
      },
      //字典code返回
      selectCode(e){
        //console.log(e)
        this.form.setFieldsValue({'uiSelectfunc':e})
      },
    }
  }
</script>
<style scoped>
  .ant-form-item {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    height: 90%;
    color: rgba(0, 0, 0, 0.65);
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5;
    list-style: none;
    font-feature-settings: 'tnum';
    margin-bottom: 5px;
    vertical-align: top;
  }
</style>